<template>
  <div class="box">
    <div class="getOrderContent">
      <div class="checkout-tit">
        <h4 class="tit-txt">我的订单信息</h4>
<el-button type="text" @click="dialogFormVisible = true" class="xzdz">新增地址</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form" >
    <el-form-item label="收件人" >
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
      <el-form-item label="收货地址" >
      <el-input v-model="form.address" autocomplete="off"></el-input>
    </el-form-item>
      <el-form-item label="电话" >
      <el-input v-model="form.phone" autocomplete="off"></el-input>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="send">确 定</el-button>
  </div>
</el-dialog>
       
      </div>
      <div class="checkout-steps">
        <!-- 收件人信息 -->
        <div class="step-tit">收件人地址:</div>
        <div class="address">
          <div class="addname" v-for='item in address'::key="item">
            <span class="address_name" >{{item.username}}</span>
            <span class="address_ress">
               {{item.address}}</span>
            <span class="address_phone">{{item.phone}}</span>
          </div>
          <!-- 送货清单 -->
          <div class="address_step">
            <div class="address-step-tit">订单信息:</div>
            <div>
              <ul class="address_ddxx">
                <li>商品图片</li>
                <li>商品信息</li>
                <li>价格</li>
                <li>数量</li>
              </ul>
            </div>
            <div class="address-goods">
              
              <ul class="address-ddxx" v-for="item in list">
                <li><img :src="'http://localhost:8081/' + item.images" width="100px" height="100px"></li>
                <li>{{ item.goods_name }}</li>
                <li>¥{{ item.price * item.num}}</li>
                <li>{{ item.num  }}</li>
              </ul>
            </div>
            </div>
          </div>
          <!-- 提交订单 -->
          <div class="address_danger">
            <el-button type="danger"  @click="tjorder()">提交订单 </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
      address: [],
      dialogFormVisible: false,
      form: {
        userid: window.sessionStorage.getItem("userid"),
        name: "",
        address: "",
        phone: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    send() {
      // console.log(this.form);
      axios.post("http://localhost:8081/home/send", this.form).then((res) => {
        // console.log(res);
        this.dialogFormVisible = false;
        this.getAddress();
      });
    },
    getOrder() {
      axios
        .get("http://localhost:8081/home/getOrder", {
          params: { id: window.sessionStorage.getItem("userid") },
        })
        .then((res) => {
          // console.log(res);
          this.list = res.data.data;
        });
    },
    getAddress() {
      axios.get("http://localhost:8081/home/getAddress").then((res) => {
        // console.log(res);
        // console.log("121312");
        this.address = res.data.data;
      });
    },
    tjorder() {
      axios
        .post("http://localhost:8081/home/tjorder", [
          window.sessionStorage.getItem("userid"),
        ])
        .then((res) => {
          this.$router.push({ path: "/order" });
        });
    },
  },
  mounted() {
    this.getOrder();
    this.getAddress();
  },
};
</script>
<style>
.checkout-tit {
  height: 60px;
}
.tit-txt {
  margin-top: 20px;
  float: left;
}

.checkout-steps {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 25px;
}
.step-tit {
  float: left;
  margin-top: -7px;
  margin-left: 20px;
}
.open {
  float: right;
  font-weight: bold;
}
span.open {
  margin-top: 20px;
}
.newadd {
  float: right;
  margin-top: -7px;
}

.address_danger {
  margin-top: 80px;
  margin-left: 700px;
}
.addname {
  margin-top: 48px;
  margin-left: -400px;
}

.address-step-tit {
  margin-top: 40px;
  margin-left: -800px;
}
.address-ddxx {
  overflow: hidden;
}
.address_ddxx li {
  width: 200px;
  float: left;
}
.address-ddxx li {
  width: 200px;
  float: left;
}
.address-goods {
  margin-top: 50px;
}
.el-button.el-button--text.xzdz {
  margin-left: 700px;
}
</style>
